import React, { useState, useEffect } from 'react';
import { View, Image, Text, ScrollView } from '@tarojs/components';
import { AtFloatLayout } from 'taro-ui';
import pChecked from '@/images/common/selected1.png';
import pUnChecked from '@/images/common/unselected.png';
import pPayCard from '@/images/paymentCode/payCard.png';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';

const CardSelect = ({ isOpened, cardList, curCard, handleClose }) => {
  const [cardSel, setCardSel] = useState(null);

  useEffect(() => {
    curCard && setCardSel(curCard);
  }, [curCard]);

  const handleCardSelect = (card) => {
    setCardSel(card);
  };

  return (
    <AtFloatLayout
      isOpened={isOpened}
      onClose={() => handleClose(cardSel)}
      className="theFloatLayout"
    >
      <View className="theContent">
        <View className="ncenter header">选择提货券</View>
        <ScrollView className="list" scrollY>
          {cardList.length > 0 &&
            cardList.map((card) => (
              <View className="item" key={'theCard_' + card.cardNum}>
                <Image className="cardIcon" src={pPayCard} />

                <View className="cardInfo">
                  <View className="infoUp">
                    <Text className="unit">¥</Text>
                    <Text className="cnt">{card.balance}</Text>
                  </View>
                  <Text className="bankNo">{card.cardNum.replace(/(.{4})/g, '$1 ')}</Text>
                </View>

                <View className="opArea" onClick={() => handleCardSelect(card)}>
                  {cardSel && cardSel.id == card.id ? (
                    <Image className="checkIcon" src={pChecked}></Image>
                  ) : (
                    <Image className="checkIcon" src={pUnChecked}></Image>
                  )}
                </View>
              </View>
            ))}
        </ScrollView>
      </View>
    </AtFloatLayout>
  );
};
export default CardSelect;
